<template>
  <div class="rightContent">
    <div class="top">
      <div class="item">
        <a href="javascript:;">
          <div class="img">
            <img src="@/assets/images/党委干部/黄晓玫.jpg" alt="" />
          </div>
          <div class="txt">
            <p class="name">姓名：黄晓玫</p>
            <p>职务：中国地质大学（武汉）党委书记</p>
            <span>详细</span>
          </div>
        </a>
      </div>
      <div class="txt">
        <p class="title">简介</p>
        <p>
          黄晓玫，女，汉族，1963年10月出生，湖北襄阳人，硕士研究生学历，法学硕士，研究员，1985年6月加入中国共产党。
        </p>
      </div>
      <div class="txt">
        <p class="title">履历</p>
        <p>
          1985年7月于华中师范学院中文系毕业后留校参加工作，历任党委组织部部长兼党校常务副校长、党委常委、校长助理。
        </p>
        <p>
          2009年11月任华中师范大学党委常委、副校长。2014年1月任华中师范大学党委副书记、纪委书记。
        </p>
        <p>2017年1月任华中师范大学党委书记。</p>
        <p>2019年6月任中国地质大学（武汉）党委书记。</p>
      </div>
    </div>
    <ul class="personList">
      <li
        v-for="(item, index) in personData"
        :key="index"
        @click="dialogVisible = true"
        class="item"
      >
        <a href="javascript:;">
          <div class="img">
            <img :src="item.imgSrc" alt="" />
          </div>
          <div class="txt">
            <p class="name">姓名：{{ item.name }}</p>
            <p>职务：{{ item.post }}</p>
            <span>详细</span>
          </div>
        </a>
      </li>
    </ul>
    <el-dialog
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <party-member></party-member>
    </el-dialog>
  </div>
</template>

<script>
import partyMember from "@/components/partyBuilding/popup/partyMember.vue";
export default {
  name: "organizationalStructure",

  data() {
    return {
      personData: [
        {
          name: "王炜哲",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党建办公室科员",
        },
        {
          name: "周立波",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党政综合办公室主任",
        },
        {
          name: "王哲伦",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党建办公室科员",
        },
        {
          name: "郑哲伦",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党政综合办公室主任",
        },
        {
          name: "王茜凯",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党建办公室科员",
        },
        {
          name: "黎遒君",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党政综合办公室主任",
        },
        {
          name: "冯麦黎",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党建办公室科员",
        },
        {
          name: "李冒",
          imgSrc: require("@/assets/images/partyImg.jpg"),
          post: "党政综合办公室主任",
        },
      ],
      dialogVisible: false,
    };
  },
  components: {
    partyMember,
  },
  mounted() {},

  methods: {
    handleClose(done) {
      done();
    },
  },
};
</script>

<style scoped>
.top {
  background: url("@/assets/images/organizationTopBg.png") no-repeat center
    center;
  background-size: 100% 100%;
  padding: 35px 0 22px 23px;
  display: flex;
  justify-content: space-between;
  margin-top: 70px;
}
.top .item {
  width: 25%;
}
.top .txt {
  color: #fefefe;
  font-size: 16px;
  width: 34%;
}
.top .txt .title {
  color: #7de2f6;
  font-size: 18px;
  margin-bottom: 15px;
}
.personList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 60px;
}
.personList li {
  width: 23%;
  background: url("@/assets/images/organizationBg.png") no-repeat center center;
  background-size: 100% 100%;
  padding: 34px 34px 20px 12px;
  margin-bottom: 34px;
}
.item .img {
  width: 109px;
  height: 136px;
  margin-right: 20px;
}
.item .img img {
  width: 100%;
  height: 100%;
}
.item a {
  color: #92d5ff;
  font-size: 16px;
  display: flex;
}
.item a .name {
  margin: 5px 0 10px;
}
.item a .txt {
  position: relative;
  flex: 1;
}
.item a .txt span {
  display: block;
  width: 87px;
  height: 31px;
  line-height: 31px;
  text-align: center;
  font-size: 16px;
  color: #fefefe;
  border-radius: 31px;
  background-image: linear-gradient(
    to right,
    rgba(81, 29, 175, 0.5),
    rgba(35, 215, 254, 0.5)
  );
  position: absolute;
  left: 0;
  bottom: 0;
}
</style>
